<template>
	<div class="all">
		<div class="app">
			<div style="width: 33%; height: 350px;">
				<p>国别分布</p>
				<div id="charts" style="width: 100%; height: 300px;">
				</div>
			</div>
			<div style="width: 33%; height: 350px;">
				<p>制式分布</p>
				<div id="charts-er" style="width: 100%; height: 300px;">

				</div>
			</div>
			<div style="width: 33%; height: 350px;">
				<p>地域分布</p>
				<div id="charts-san" style="width: 100%; height: 300px;">

				</div>
			</div>

		</div>

		<div class="bottom">
			<el-table :data="mydateBottom" style="width: 100%">
				<el-table-column prop="InsertDate" label="时间">
				</el-table-column>
				<el-table-column prop="BoxOffice" label="票房(万)">
				</el-table-column>
				<el-table-column prop="BoxOfficeMoM" label="票房环比">
				</el-table-column>
				<el-table-column prop="ShowCount" label="场次">
				</el-table-column>
				<el-table-column prop="ShowCountMoM" label="场次环比">
				</el-table-column>
				<el-table-column prop="AudienceCount" label="人次(万)">
				</el-table-column>
				<el-table-column prop="AudienceCountMoM" label="人次环比">
				</el-table-column>
				<el-table-column prop="AvgAudienceCount" label="场均人次">
				</el-table-column>
				<el-table-column prop="AvgBoxOffice" label="平均票价">
				</el-table-column>
				<el-table-column prop="MovieNameInfo" label="单日票房冠军">
				</el-table-column>
				<el-table-column prop="ServicePrice" label="服务费(万)">
				</el-table-column>
			</el-table>
		</div>

	</div>
</template>
<style scoped>
	#charts,
	#charts-er,
	#charts-san {
		border: 1px solid #ececec;
		border-radius: 2px;
	}

	.all {
		background-color: #E5E5E5;

		padding-bottom: 10px;
	}

	.app {
		display: flex;
		background: #fff;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;

	}

	.bottom {
		margin-top: 20px;
		background: #fff;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
	}
</style>
<script>
	import {
		GetBing1,
		GetBing2,
		GetBing3,
		GetBottom
	} from '@/api/my.js'

	export default {

		mounted() {},
		props: {
			num: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				mydate: [],
				mydate2: [],
				mydate3: [],
				mydateBottom: [],

			}
		},
		watch: {
			num() {
				console.log("我被改变了")
				this.getDate()
			}
		},
		created() {

			this.getDate()
		},
		methods: {


			getDate() {

				GetBottom({
					'r': "0.6790471833060048",
					'datetype': "Day",
					'date': "2022-08-09,2022-08-15",
					'sdate': "2022-08-09",
					'edate': "2022-08-15",
					'bserviceprice': "1"
				}).then(res => {
					// console.log(res.data);
					this.mydateBottom = res.data.data.table0
					for (let item of this.mydateBottom) {
						item.BoxOffice = (item.BoxOffice / 10000).toFixed(2)
						item.BoxOfficeMoM = (item.BoxOfficeMoM.toFixed(2) + '%')
						item.ShowCountMoM = (item.ShowCountMoM.toFixed(2) + '%')
						// console.log(item.BoxOfficeMoM);
					}
					console.log(res.data);
					// this.initDate(this.mydate, "charts")
				})

				GetBing1({
					'r': "0.6790471833060048",
					'datetype': "Day",
					'date': "2022-08-09,2022-08-15",
					'sdate': "2022-08-09",
					'edate': "2022-08-15",
					'bserviceprice': "1"
				}).then(res => {
					// console.log(res.data);
					this.mydate = res.data.data.table0
					console.log(this.mydate);
					this.initDate(this.mydate, "charts")
				})

				GetBing2({
					'r': "0.6790471833060048",
					'datetype': "Day",
					'date': "2022-08-09,2022-08-15",
					'sdate': "2022-08-09",
					'edate': "2022-08-15",
					'bserviceprice': "1"
				}).then(res => {
					// console.log(res.data);
					this.mydate2 = res.data.data.table0
					this.initDate(this.mydate2, "charts-er")
					console.log(this.mydate2);
				})

				GetBing3({
					'r': "0.6790471833060048",
					'datetype': "Day",
					'date': "2022-08-09,2022-08-15",
					'sdate': "2022-08-09",
					'edate': "2022-08-15",
					'bserviceprice': "1"
				}).then(res => {
					// console.log(res.data);
					this.mydate3 = res.data.data.table0
					this.initDate(this.mydate3, "charts-san")
					console.log(this.mydate3);
				})




			},

			initDate(mydate, id) {
				if (this.num == 1) {
					for (let i in mydate) {
						// console.log("1");		
						mydate[i].name = mydate[i].MovieProperty || mydate[i].MovieFormat || mydate[i].CityLevelName
						mydate[i].value = (mydate[i].BoxOffice / 10000)
					}
				} else if (this.num == 2) {
					for (let i in mydate) {
						// console.log("1");		
						mydate[i].name = mydate[i].MovieProperty || mydate[i].MovieFormat || mydate[i].CityLevelName
						mydate[i].value = mydate[i].ShowCount / 10000
					}
				} else if (this.num == 3) {
					for (let i in mydate) {
						// console.log("1");		
						mydate[i].name = mydate[i].MovieProperty || mydate[i].MovieFormat || mydate[i].CityLevelName
						mydate[i].value = mydate[i].AudienceCount / 10000
					}
				}
				let myChart = this.$echarts.init(document.getElementById(`${id}`));
				myChart.setOption({
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: [30, 60],
						data: mydate,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				})

			}
		},

	}
</script>

<style>
</style>
